<template>
  <vue-draggable-resizable
    v-show="visible"
    class-name="drag-view"
    :w="width"
    :h="height"
    :x="x"
    :y="y"
    :resizable="false"
    :z="999"
    @dragging="onDrag"
  >
    <header>
      <h6>参考信息</h6>
      <div>
        <p @click="handleRefresh"><i /><span>刷新</span></p>
        <span @click="handleClose" />
      </div>
    </header>
    <div class="drag-main">
      <dl v-for="(item, index) in dataList" :key="index">
        <dt>{{ item.title }}</dt>
        <dd v-for="(child, i) in item.data" :key="i"><label>{{ child.label }}</label><p>{{ child.value }}</p></dd>
      </dl>
    </div>
  </vue-draggable-resizable>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable'

export default {
  components: {
    VueDraggableResizable
  },
  props: {
    referVisible: {
      type: Boolean,
      default: true
    },
    dataList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      width: 190,
      height: 360,
      x: 100,
      y: -460,
      maxX: 0,
      maxY: 0,
      visible: this.referVisible
    }
  },
  computed: {
  },
  mounted() {
    const clientWidth = this.$parent.$el.clientWidth // document.documentElement.clientWidth
    const clientHeight = document.documentElement.clientHeight
    const x = clientWidth - this.width - 10
    this.x = x
    this.y = -(clientHeight - this.height / 2)
  },
  methods: {
    onDrag(x, y) {
    },
    handleRefresh() {
      this.$emit('handleRefresh')
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
  .drag-view{
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E3E7ED;
    box-shadow: 0 0 6px 0 #DFDFDF;
    border-radius: 4px;
    position: fixed;
    cursor: move;
    header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 10px;
      background: #F2F6FC;
      h6, p {
        line-height: 1;
        margin: 0;
      }
      h6 {
        color: #333;
        font-size: 12px;
        font-weight: bold;
      }
      &>div {
        display: flex;
        align-items: center;
        p {
          display: flex;
          align-items: center;
          cursor: pointer;
          &:active {
            i {
              transform: rotate(360deg);
              transition: all linear 200ms;
            }
            span {
              opacity: 0.6;
            }
          }
          i {
            width: 12px;
            height: 12px;
            background: url("https://mt100180-1251586806.picsh.myqcloud.com/34109db0-c4d3-4891-af35-671ef555cafc") no-repeat;
            background-size: contain;
          }
          span {
            margin-left: 5px;
            font-size: 12px;
            color: #5C70EA;
          }
        }
        &>span {
          width: 12px;
          height: 12px;
          margin-left: 10px;
          background: url("https://mt100180-1251586806.picsh.myqcloud.com/8ec55755-3a47-43b8-b424-21424cbd350d") no-repeat;
          background-size: contain;
          cursor: pointer;
        }
      }
    }
    .drag-main {
      padding: 8px 10px;
      height: 330px;
      overflow-y: auto;
    }
    dl, dt,dd, p {
      margin: 0;
    }
    dl {
      margin-bottom: 8px;
      border-bottom: solid 1px #DDDFE6;
      &:last-of-type {
        margin-bottom: 0;
        border-bottom: none;
      }
      dt {
        line-height: 15px;
        margin-bottom: 14px;
        color: #333333;
        font-size: 11px;
        font-weight: bold;
      }
      dd {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 26px;
        border-bottom: dashed 1px #DDDFE6;
        font-size: 12px;
        &:last-of-type {
          border-bottom: none;
        }
        label {
          color: #333333;
        }
        p {
          color: #121212;
        }
      }
    }
  }
</style>
